<script setup lang="ts">
import { ref, computed } from 'vue';

// 创建响应式变量来存储当前选择的主题
const currentTheme = ref('day');

// 计算属性，根据当前主题返回对应的类名
const themeClass = computed(() => {
  return currentTheme.value;
});

// 处理主题切换的函数
const changeTheme = (event: Event) => {
  const target = event.target as HTMLSelectElement;
  currentTheme.value = target.value;
};

// 视频链接
const videoUrl = ref('https://ugchsy.gtimg.com/B_fXrb0otmtGHxqhZ5HYDTdtMddOslMbOUksEs0TtMwqudKuG0oQCvptyaeuAdvdZA0h2Rse4VBCS4_9fFGckqlnJmfSowgibcUuIzBFXBRtEAsZkVNPRFjKtdUPLKXzHQJha8_sEVtmXJN74kwwb28w/svp_50001/szg_3475_50001_0bc3uiaimaaareaosexvh5ufdiwdq2rabbsa.f622.mp4?sdtfrom=v1104&guid=305f5872685a615a44463451335058&vkey=113B935889D61266AC7DE2AFED8652772D3C062CF876223D9311E6BE025E9F82DA1860671E65C4F0814A7527A46E54AE4A6499BEC74794C229F52513836A572A4E9E3C070B838CC0F6DE6161D695615D97878FDCD895AC00E4452D5EF94FB46A279144A384DA33463D7FF4F40CBC02887DD465138C8C8AB5EE42FA028AE9B8D52B33F2306B6E541E132695CBF2C4D2ED342F351257D1AB3B872D6068922623FF047D8C0AE43AA827B753B7BF539C579E');
</script>

<template>
  <div class="app-container" :class="themeClass">
    <!-- 右上角的主题选择下拉列表 -->
    <div class="theme-selector">
      <select v-model="currentTheme" @change="changeTheme">
        <option value="day">日</option>
        <option value="night">夜</option>
        <option value="colorful">多彩</option>
        <option value="dopamine">多巴胺</option>
      </select>
    </div>

    <!-- 新闻内容区域 -->
    <div class="news-container">
      <h1>特朗普发布争议性AI视频引发全美抗议</h1>
      
      <!-- 嵌入视频区域 -->
      <div class="video-container">
        <div class="video-wrapper">
          <!-- 使用video元素直接嵌入视频 -->
          <video 
            :src="videoUrl" 
            controls
            autoplay
            muted
            loop
            playsinline
            class="news-video"
          >
            您的浏览器不支持视频播放。
          </video>
        </div>
      </div>
      
      <div class="news-content">
        <p>2025年10月18日，美国前总统特朗普在自己的社交媒体上发布了一条极具争议的人工智能制作视频，引发全美范围内的抗议浪潮。</p>
        <p>在这段AI生成的视频中，特朗普本人头戴金色王冠，驾驶着战斗机翱翔在示威群众的头顶上，然后向人群投放大便。这一荒诞场景迅速在社交媒体上传播，引发公众强烈不满。</p>
        <p>抗议者的主要诉求是反对特朗普政府存在的独裁倾向，他们高举"民主而非君主"、"我们人民"等标语，强调美国没有国王，反对总统拥有绝对权力。</p>
        <p>值得注意的是，就在前一天，特朗普在接受福克斯新闻频道采访时还表示："他们把我比作国王，可我不是国王。"然而采访播出后不久，他就发布了这段自比国王的AI视频。</p>
        <p>副总统万斯也针锋相对地发布了他和特朗普加冕成为国王的照片，白宫也发布了类似的照片。特朗普所属的共和党则把这些活动贬斥为"仇恨美国集会"。</p>
        <p>这是特朗普重返白宫之后，美国民众举行的第三次大规模抗议集会。目前美国政府已经停摆18天，这次停摆不仅导致联邦项目与服务关停，还考验着美国核心的权力制衡体系。</p>
      </div>
    </div>
  </div>
</template>

<style>
/* 基础样式 */
.app-container {
  min-height: 100vh;
  padding: 20px;
  transition: all 0.3s ease;
  font-family: Arial, sans-serif;
}

.theme-selector {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.theme-selector select {
  padding: 8px 15px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: white;
  cursor: pointer;
  font-size: 16px;
}

.news-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 视频容器样式 */
.video-container {
  margin: 20px 0;
  border-radius: 8px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.news-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background-color: #000;
}

.news-content p {
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: justify;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

/* 日间主题样式 */
.day {
  background-color: #f5f5f5;
  color: #333;
}

.day .news-container {
  background-color: white;
  color: #333;
}

.day .theme-selector select {
  border-color: #ddd;
}

/* 夜间主题样式 */
.night {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

.night .news-container {
  background-color: #2d2d2d;
  color: #e0e0e0;
}

.night .theme-selector select {
  background-color: #3d3d3d;
  color: #e0e0e0;
  border-color: #555;
}

.night h1 {
  color: #ffffff;
}

/* 多彩主题样式 */
.colorful {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
}

.colorful .news-container {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.colorful .theme-selector select {
  background-color: rgba(255, 255, 255, 0.8);
  color: #764ba2;
  border-color: #ffffff;
  font-weight: bold;
}

.colorful h1 {
  color: #764ba2;
}

.colorful .video-wrapper {
  box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
}

/* 多巴胺主题样式 */
.dopamine {
  background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7, #DDA0DD, #98D8C8);
  background-size: 400% 400%;
  animation: dopamineGradient 15s ease infinite;
  color: #2D3436;
}

.dopamine .news-container {
  background-color: rgba(255, 255, 255, 0.85);
  color: #2D3436;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transform: rotate(-1deg);
}

.dopamine .news-container:hover {
  transform: rotate(0deg) scale(1.02);
  transition: transform 0.3s ease;
}

.dopamine .theme-selector select {
  background-color: rgba(255, 255, 255, 0.9);
  color: #E17055;
  border-color: #FDCB6E;
  font-weight: bold;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.dopamine h1 {
  color: #E17055;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  transform: rotate(1deg);
}

.dopamine .video-container {
  transform: rotate(0.5deg);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dopamine .video-wrapper {
  box-shadow: 0 6px 16px rgba(225, 112, 85, 0.3);
  transform: rotate(-0.5deg);
}

.dopamine .news-content p {
  font-weight: 500;
  color: #2D3436;
}

.dopamine .news-content p:nth-child(odd) {
  color: #6C5CE7;
  transform: rotate(0.5deg);
}

.dopamine .news-content p:nth-child(even) {
  color: #00B894;
  transform: rotate(-0.5deg);
}

@keyframes dopamineGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .news-container {
    padding: 15px;
  }
  
  .video-container {
    margin: 15px 0;
  }
  
  .theme-selector {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 20px;
    text-align: center;
  }
}
</style>
